<template>
  <div id="invitingLink">
    <app-header></app-header>
    <div class="invitingLink-banner"></div>
    <app-marquee v-if="noticeInfo" :title="noticeInfo"/>
    <span class="title_inviting">邀请流程</span>
    <ul class="auto1200 processList">
      <li>
        <img src="../../assets/image/icon1.png" alt="">
        <p>复制并分享你的专属邀请链接给好友</p>
      </li>
      <li>
        <img src="../../assets/image/icon2.png" alt="">
        <p>好友打开你的专属邀请链接并注册登录</p>
      </li>
      <li>
        <img src="../../assets/image/icon3.png" alt="">
        <p>永享好友挖矿收益的10%</p>
      </li>
    </ul>
    <!---->
    <div class="inviting_link">
      <span class="title">你的专属邀请链接</span>
      <div class="input_copy" v-if="userInfo">
        <input type="text" placeholder="登录后可查看专属邀请链接" :value="userInfo.inviteCode">
        <div class="btn_copy" @click="handleCopy">复制链接</div>
      </div>
      <ol class="inviting_box">
        <li>
          <span>邀请人数</span>
          <p v-if="userInfo">{{userInfo.num}}</p>
        </li>
        <li>
          <span>获得的ONEBET</span>
          <p v-if="userInfo">{{userInfo.amount}}</p>
        </li>
      </ol>
    </div>
    <div class="shareSkill">
      <div class="title">
        <span>邀请小技巧</span>
        <p>（邀请成功率提升200%）</p>
      </div>
      <ul>
        <li>
          <span>1</span>
          <p>邀请您的家人、朋友、同学同事成功率最高</p>
        </li>
        <li>
          <span>2</span>
          <p>分享3个以上telegram群，成功邀请几率提升200%</p>
        </li>
        <li>
          <span>3</span>
          <p>发布Twitter，并@空投号，博彩类号</p>
        </li>
        <li>
          <span>4</span>
          <p>制作YouTube视频/自己博客网站发表博文并放上</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import header from '@/components/header/header'
  import marquee from '../../components/marquee/marquee'
  import Api from '@/axios/api/api'

  export default {
    name: 'invitingLink',
    data() {
      return {
        noticeInfo: '', // 跑马灯
        userInfo: {
          'inviteCode': '', // 邀请码
          'num': 0,
          'amount': 0
        }
      }
    },
    components: {
      'app-header': header,
      'app-marquee': marquee
    },
    computed: {},
    methods: {
      getUserinfo() {
        Api.getInviteinfos().then(res => {
          let result = res.data
          if (result.code === 0) {
            this.userInfo = result.data
          } else {
            this.$message.error(result.message)
          }
        })
      },
      handleCopy(option, index) { // 复制详情
        let vm = this
        let copyCont = this.userInfo.inviteCode
        if (!copyCont) {
          vm.$message.success('登录后可查看专属邀请链接!')
        }
        this.$copyText(copyCont).then(function (e) {
          if (e.text) {
            vm.$message.success('复制成功')
          }
        }, function (e) {
          alert('Can not copy')
          console.log(e)
        })
      }
    },
    mounted() {
      // 获取用户数据
      Api.getInviteinfos().then(res => {
        let result = res.data
        if (result.code === 0) {
          console.log(result.data)
          this.userInfo = result.data
          this.userInfo.inviteCode = window.location.origin + '#/invitingfriends?inviteCode=' + result.data.inviteCode
          // this.userInfo = result.
        } else {
          this.$message.error(result.message)
        }
      })
      // 跑马灯
      Api.systemInforms().then(res => {
        let result = res.data
        if (result.code === 0) {
          this.noticeInfo = result.data.message
        } else {
          this.$message.error(result.message)
        }
      })
    }
  }
</script>

<style lang="less">
  body #app > div {
    height: auto;
  }

  #invitingLink {
    font-family: PingFangSC-Regular;
    .shareSkill {
      .title {
        font-size: 28px;
        color: #000000;
        text-align: center;
        line-height: 42px;
        padding: 49px 0 38px 0;
        font-weight: 500;
      }
      ul {
        overflow: hidden;
        li {
          width: 470px;
          float: left;
          height: 100px;
          line-height: 100px;
          text-align: center;
          margin-bottom: 25px;
          margin-top: 5px;
          &:nth-child(2n+2) {
            float: right;
          }
          span {
            width: 85px;
            height: 100px;
            float: left;
            font-size: 28px;
            color: #FFFFFF;
            background: #8638FD;
          }
          p {
            margin-left: 85px;
            width: 385px;
            box-shadow: 2px 2px 10px 0 rgba(219, 217, 223, 0.50);
          }
        }
      }
    }
    .inviting_link {
      background: #f6f6f6;
      height: 450px;
      .title {
        font-size: 28px;
        color: #000000;
        display: block;
        text-align: center;
        padding: 50px 0 42px 0;
      }
      .inviting_box {
        width: 658px;
        height: 180px;
        margin: 0 auto;
        padding: 50px 0;
        li {
          background: #8638FD;
          height: 100%;
          width: 273px;
          float: left;
          span {
            font-size: 24px;
            color: #FFFFFF;
            text-align: center;
            display: block;
            padding-top: 39px;
            line-height: 33px;
          }
          p {
            font-size: 50px;
            text-align: center;
            padding-top: 20px;
            color: #e9cb63;
          }
          &:nth-child(2) {
            width: 335px;
            float: right;
          }
        }
      }
      .input_copy {
        width: 596px;
        margin: 0 auto;
        overflow: hidden;
        padding-bottom: 10px;
        display: block;
        height: 42px;
        input {
          width: 416px;
          height: 38px;
          border: 2px solid #8638FD;
          float: left;
          outline: none;
          font-size: 16px;
          color: #666;
          text-indent: 4px;
          text-indent: 6px;
        }
        .btn_copy {
          height: 42px;
          line-height: 42px;
          text-align: center;
          background: #8638FD;
          border-radius: 4px;
          float: right;
          color: #fff;
          width: 140px;
          cursor: pointer;
          &:active {
            position: relative;
            top: 1px;
          }
        }
      }
    }
    .shareSkill {
      width: 1022px;
      margin: 0 auto;
    }
    height: auto;
    .title_inviting {
      font-size: 28px;
      color: #000;
      display: block;
      text-align: center;
      padding: 50px 0;
    }
    .processList {
      overflow: hidden;
      width: 1046px;
      li {
        width: 260px;
        float: left;
        padding-right: 124px;
        position: relative;
        &:after {
          content: '';
          position: absolute;
          width: 124px;
          height: 50px;
          background: url("../../assets/image/icon_right.png") no-repeat;
          background-size: 100% 100%;
          right: 0;
          top: 27px;
        }
        &:nth-child(2) {
          width: 272px;
        }
        &:nth-child(3) {
          width: 200px;
          padding-right: 0;
          &:after {
            display: none;
          }
        }
        img {
          width: 100px;
          height: 100px;
          display: block;
          margin: 0 auto;
        }
        p {
          text-align: center;
          font-size: 16px;
          color: #000000;
          padding: 45px 0 60px 0;
        }
      }
    }
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    padding-bottom: 78px;
    .invitingLink-banner {
      width: 100%;
      height: 500px;
      display: block;
      overflow: hidden;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50%;
      background-image: url(../../assets/image/banner.png);
    }
  }
</style>
